<script setup lang="ts">
  import { PropType } from 'vue'
  import { CheckboxConfig } from '../../hooks/types'

  defineOptions({
    name: 'OrderCustomFormCheckbox',
  })

  const props = defineProps({
    options: {
      type: Array as PropType<CheckboxConfig['options']>,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: () => false,
    },
  })

  const value = defineModel('modelValue', { type: Array, default: [] })
</script>

<template>
  <div class="checkbox-group">
    <el-checkbox
      v-for="(option, optionIndex) in props.options"
      :key="optionIndex"
      v-model="value[optionIndex]"
      :disabled="props.disabled"
      :label="option"
      size="small"
    />
  </div>
</template>

<style scoped lang="scss">
  .checkbox-group {
    display: flex;
    column-gap: 12px;
    width: 100%;
    flex-wrap: wrap;

    :deep(.el-checkbox) {
      margin: 0;
      column-gap: 2px;
      height: 28px;

      .el-checkbox__label {
        padding: 0;
      }
    }
  }
</style>
